<template>
  <div id="app" class="container">
    <div class="sidebar">
      BrowserView
      <button @click="navBrowser('https://www.baidu.com/')">显示百度首页</button>     
      <a-dropdown placement="right" arrow>
          <template #overlay>
            <a-menu>
              <a-menu-item  @click="navBrowser('https://www.qq.com/')"> Gitee网站</a-menu-item>
              <a-menu-item  @click="navBrowser('https://www.qq.com/')"> QQ网站 </a-menu-item>
            </a-menu>
          </template>          
          <button>被遮住的菜单</button>         
      </a-dropdown>

      <p>
        自Electron v30起，BrowserView已被弃用，官方建议迁移到 WebContentsView
      </p>
    </div>

  </div>

</template>

<script setup>
import { ipcApiRoute } from "@/api/main";
import { ipc, isEE } from "@/utils/ipcRenderer";
import { onMounted } from 'vue';

function navBrowser(url) {
    console.log(url);
    ipc.send(ipcApiRoute.window.openBrowserView, url ); 
}

</script>

<style lang="less" scoped>
#app {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100%;
}

.sidebar {
  width: 140px;
  background-color: #f4f4f4;
  padding: 5px;
  position: relative; /* 确保 z-index 生效 */
  z-index: 999; /* 设置较高的层级 */
}
.sidebar p {
    margin-top: 10px;
    padding: 5px;
    font-size: 11px;
    line-height: 1.5;
    background-color: #d0ff58;
}
.sidebar button {
  margin-top: 5px;
}

.content {
  flex: 1;
}

</style>